<template>
  <div id="add-people">
    <ModelTitle>
        <template>
            新增居民档案
        </template>
    </ModelTitle>
    <el-row>
        <el-col :span="24">居民信息</el-col>
    </el-row>
    <div id="add-people-main">
        <div class="add-people-line">
            <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">姓名：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="list.user_name"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">身份证号：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="list.user_cardId"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">性别：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="list.user_sex">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-col>
            </el-row>
        </div>
        <div class="add-people-line">
            <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">出生年月：</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="list.user_bir" type="date" placeholder="选择日期" :style={width:wid}></el-date-picker>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">手机号码：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="list.user_phone"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">现居地址：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="list.user_area"></el-input>
            </el-col>
            </el-row>
        </div>
        <div class="add-people-line">
            <el-row :gutter="20">
            <el-col :span="2">
                 <div class="inputTitle">居民标签：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="list.lable_id">
                    <el-option v-for="(item, index) in lableList" :key="index" :label="item.lable_name" :value="item.lable_id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">年龄：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="list.user_age" :style={width:wid}></el-input>
            </el-col>
            </el-row>
        </div>
    </div>
    <el-divider class="line"></el-divider>
    <div id="add-people-bottom">
        <el-button type="primary" @click="addUser">保存</el-button>
        <el-button type="primary" @click="clickWs">完善居民档案</el-button>
        <el-button type="danger" @click="clickFh">返回</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '../../components/ModelTitle.vue'
export default {
    created(){
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
        this.lableLoad()
    },
    components:{
        ModelTitle
    },
    data() {
        return {
            wid:"200px",
            // list:{
            //     user_name:"",
            //     user_cardId:"",
            //     user_sex:null,
            //     user_bir:"",
            //     user_phone:"",
            //     user_area:"",
            //     lable_id:null,
            //     contract_state:1,
            //     serve_state:1,
            // },
            list:{},
            lableList:[]
        }
    },
    methods:{
        clickFh(){
            this.$router.push({
                path:"/people"
            })
        },
        clickWs(){
            this.$router.push({
                path:"/perfectPeople",
                query:{
                    list:this.list
                }
            })
        },
        lableLoad(){
            axios({
                url:"/sign/getLableList",
                method:"get"
            }).then(res => {
                this.lableList = res.data
            })
        },
        addUser(){
            let date = moment(this.list.user_bir).format('YYYY-MM-DD');
            this.list.user_bir = date
            this.list.end_tile = moment(new Date()).format('YYYY-MM-DD');
            axios({
                url:"/sign/addUser",
                method:"post",
                params:{
                    UserData:this.list
                }
            }).then(res =>{
                this.$message({
                    message: '新增成功！！！',
                    type: 'success'
                });
                this.$router.back()
            }).catch(res =>{
                this.$message({
                    message: '新增失败！！！',
                    type: 'error'
                });
            })
        }
    }
}
</script>

<style>
    #add-people{
        width: 1150px;
        background: white;
        box-sizing: border-box;
        padding: 10px;
        margin: 20px auto;
    }
    #add-people-main{
        margin-top: 10px;
    }
    .inputTitle{
        width: 100%;
        height: 38px;
        display: flex;
        font-size: 13px;
        color: darkgray;
        align-items: center;
        justify-content: flex-end;
    }
    .add-people-line{
        margin-bottom: 20px;
    }
    #add-people-bottom{
        width: 100%;
        height: 50px;
    }
</style>